<template>
  <div class="my">
    <div class="data">
      <!-- 导航栏 -->
      <div class="head">
        <div class="left" @click="show = true">
          <van-icon name="wap-nav" size="24" />
        </div>

        <div class="right" @click="goSearch">
          <van-icon name="search" size="24" />
        </div>
      </div>

      <!-- 背景图 -->
      <div v-if="id === null">
        <van-image lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>

      <div v-else>
        <van-image lazy-load :src="userData.backgroundUrl">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
    </div>

    <!-- 我的信息 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <Myslef></Myslef>
    </van-popup>

    <!-- 个人信息 -->
    <div class="databox">
      <!-- 头像 -->
      <div class="headimg">
        <div v-if="id === null">
          <van-image
            lazy-load
            round
            width="80px"
            height="80px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>

        <div v-else>
          <van-image
            lazy-load
            round
            width="80px"
            height="80px"
            :src="userData.avatarUrl"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
      </div>

      <div class="name" v-if="id === null">
        <div class="username" @click="goLogin">
          立即登录
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="name" v-else>
        <div class="username">{{ userData.nickname }}</div>
        <div class="usertext">{{ userData.signature }}</div>
      </div>
    </div>

    <!-- 分类信息 -->
    <div class="databox grid">
      <van-grid>
        <van-grid-item
          :icon="require('../assets/my/play.svg')"
          text="最近播放"
          @click="listShow = true"
        />
        <van-grid-item
          :icon="require('../assets/my/xiazai.svg')"
          text="本地下载"
        />
        <van-grid-item :icon="require('../assets/my/yunpan.svg')" text="云盘" />
        <van-grid-item :icon="require('../assets/my/buy.svg')" text="已购" />
        <van-grid-item
          :icon="require('../assets/my/friend.svg')"
          text="我的好友"
        />
        <van-grid-item
          :icon="require('../assets/my/like.svg')"
          text="收藏和赞"
        />
        <van-grid-item
          :icon="require('../assets/my/boke.svg')"
          text="我的博客"
        />
        <van-grid-item
          :icon="require('../assets/my/musicbox.svg')"
          text="音乐罐子"
        />
      </van-grid>
    </div>

    <!-- 我喜欢的歌 -->
    <div class="databox like" @click="goLike">
      <div class="likeimg" v-if="Likesong.length === 0">
        <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
      </div>

      <div class="likeimg" v-else>
        <img :src="Likesong[0].img" alt="" />
      </div>

      <div class="likebox">
        <div class="liketit">我喜欢的音乐</div>
        <div class="num" v-if="Likesong.length === 0">0首</div>
        <div class="num" v-else>{{ Likesong.length }}首</div>
      </div>

      <div class="likebtn">
        <img src="../assets/my/xindong.svg" alt="" />
        心动模式
      </div>
    </div>

    <!-- 歌单分类 -->
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="创建歌单">
        <div class="databox est">
          <div class="sheet">
            创建歌单(0个)
            <div class="add"><van-icon name="plus" /></div>
          </div>

          <div class="emptybox">
            <van-empty description="还没有创建的歌单"> </van-empty>
          </div>
        </div>
      </van-tab>

      <van-tab title="收藏歌单">
        <div class="databox est" v-if="Songsheet.length === 0">
          <div class="sheet">收藏歌单({{ Songsheet.length }}个)</div>

          <div class="emptybox">
            <van-empty description="还没有收藏的歌单">
              <van-button
                round
                type="danger"
                class="bottom-button"
                @click="goSongsheetlist"
              >
                去看看
              </van-button>
            </van-empty>
          </div>
        </div>

        <div class="databox est" v-else>
          <div class="sheet">收藏歌单({{ Songsheet.length }}个)</div>

          <van-swipe-cell v-for="(item, index) in Songsheet" :key="index">
            <van-card
              :desc="item.text"
              :title="item.name"
              class="goods-card"
              :thumb="item.img"
              @click="viewSongsheet(item.id)"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="cancelSongsheet(index)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-tab>

      <van-tab title="歌单助手">
        <div class="databox help">
          <div class="sheet">歌单助手</div>

          <div class="helptit">你可以从歌单中筛选出</div>

          <van-notice-bar :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item>很久未听 的 粤语歌</van-swipe-item>
              <van-swipe-item>适合 夜晚听的 催眠曲</van-swipe-item>
              <van-swipe-item>80、90年代 的 老歌</van-swipe-item>
            </van-swipe>
          </van-notice-bar>

          <div class="helpbox">
            <div class="helpbtn" @click="goSongsheetlist">试试看</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 播放歌曲列表 -->
    <div class="songlist">
      <van-popup v-model="listShow">
        <div class="playtit">播放列表</div>

        <div v-if="defaultSongList.length === 0 ? true : false">
          <van-empty description="列表空空，快去听歌吧" />
        </div>

        <!-- 歌曲列表 -->
        <div
          class="tabbox"
          v-else
          v-for="(item, index) in defaultSongList"
          :key="index"
          @click="
            playAudio(
              item.songId,
              item.picUrl,
              item.songName,
              item.singerName,
              item.singerId
            )
          "
        >
          <!-- 封图 -->
          <div class="sealing">
            <van-image :src="item.picUrl" lazy-load>
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>

          <!-- 名字 -->
          <div class="tabname">
            <div class="tabsongname">{{ item.songName }}</div>
            <div class="tabtxt">
              <div class="textbox">SQ</div>
              {{ item.singerName }}
            </div>
          </div>

          <div class="tabplay">
            <van-icon
              :name="
                audioId !== item.songId
                  ? 'play-circle-o'
                  : isPaused
                  ? 'play-circle-o'
                  : 'pause-circle-o'
              "
            />
          </div>

          <div class="share" @click="showShare = true">
            <van-icon name="ellipsis" />
          </div>
        </div>

        <!-- 分享面板 -->
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import Myslef from "../components/Myself.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "My",

  components: {
    Myslef,
  },

  data() {
    return {
      show: false,

      active: 0,

      listShow: false,

      // 分享面板
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],

      //用户数据
      userData: [],

      id: "",
    };
  },

  created() {
    //获取用户数据
    this.getUser();

    //获取本地喜欢歌曲数据
    let Likesongs = localStorage.getItem("Likesong");
    if (Likesongs) {
      Likesongs = JSON.parse(Likesongs);
      this.changeStateProperty({
        key: "Likesong",
        value: Likesongs,
      });
    }

    //获取本地喜欢歌曲数据
    let Songsheets = localStorage.getItem("Songsheet");
    if (Songsheets) {
      Songsheets = JSON.parse(Songsheets);
      this.changeStateProperty({
        key: "Songsheet",
        value: Songsheets,
      });
    }
  },

  computed: {
    ...mapState([
      "picUrl",
      "isPaused",
      "audioEle",
      "songName",
      "songerName",
      "singerId",
      "defaultSongList",
      "audioId",
      "Likesong",
      "Songsheet",
    ]),
  },

  methods: {
    //跳转到登录页面
    goLogin() {
      this.$router.push({ name: "Login" });
    },

    goLike() {
      this.$router.push({ name: "Like" });
    },

    //查看歌单页面
    viewSongsheet(id) {
      this.$router.push({ name: "Songsheet", params: { id } });
    },

    //跳转到歌单页面
    goSongsheetlist() {
      this.$router.push({ name: "Songsheetlist" });
    },

    //跳转到搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },

    //取消歌单
    cancelSongsheet(index) {
      this.Songsheet.splice(index, 1);
      localStorage.setItem("Songsheet", JSON.stringify(this.Songsheet));
    },

    //获取用户数据
    getUser() {
      this.id = this.$cookies.get("uid");

      this.axios({
        method: "get",
        url: "/user/detail",
        params: {
          uid: this.id,
        },
      })
        .then((res) => {
          this.userData = res.data.profile;
        })
        .catch((err) => {
          
        });
    },

    ...mapMutations(["changeStateProperty"]),

    // 点击播放音频
    playAudio(id, picUrl, songName, songerName, singerId) {
      if (id === this.audioId) {
        if (!this.audioEle.paused) {
          //暂停歌曲
          this.audioEle.pause();
          this.changeStateProperty({ key: "isPaused", value: true });
        } else {
          //播放歌曲
          this.audioEle.play();
          this.changeStateProperty({ key: "isPaused", value: false });
        }
        return;
      }

      //获取音频url
      this.axios({
        method: "get",
        url: "/song/url",
        params: {
          id,
        },
      })
        .then((res) => {
          let audioUrl = res.data.data[0].url;
          this.changeStateProperty({ key: "audioUrl", value: audioUrl });
          this.changeStateProperty({ key: "audioId", value: id });
          //获取暂停状态
          this.changeStateProperty({ key: "isPaused", value: false });
        })
        .catch((err) => {
          
        });

      //获取播放图片
      this.changeStateProperty({ key: "picUrl", value: picUrl });

      this.changeStateProperty({ key: "songName", value: songName });
      this.changeStateProperty({ key: "songerName", value: songerName });
      this.changeStateProperty({ key: "singerId", value: singerId });

      //获取专辑评论数据
      this.axios({
        method: "get",
        url: "/comment/music",
        params: {
          id,
        },
      })
        .then((res) => {
          this.changeStateProperty({
            key: "audioComment",
            value: res.data.hotComments,
          });
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.data {
  width: 100%;
  position: relative;
  bottom: 24px;
}

//导航栏
.head {
  width: 100%;
  display: flex;
  position: relative;
  top: 30px;
  padding: 0px 16px;
  box-sizing: border-box;
  z-index: 99;
}

.right {
  margin-left: auto;
}

// 个人信息
.databox {
  width: 94%;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 14px;
  margin: auto;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  bottom: 60px;
  &.grid {
    padding: 10px;
    bottom: 40px;
  }
  &.like {
    bottom: 20px;
    align-items: center;
    justify-content: space-between;
  }
  &.est {
    bottom: 0;
    top: 10px;
    padding: 10px 0;
    margin-bottom: 10px;
  }
  &.help {
    bottom: 0;
    top: 10px;
    padding: 10px 0;
    margin-bottom: 70px;
  }
}

.headimg {
  width: 100%;
  height: 46px;
  &/deep/.van-image {
    left: 37%;
    bottom: 50px;
  }
}

.name {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.username {
  width: 100%;
  text-align: center;
  font-size: 16px;
  padding-bottom: 6px;
  font-weight: 600;
}

.usertext {
  width: 100%;
  text-align: center;
  color: #808080;
}

//我喜欢的歌
.likeimg {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  & img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
  }
}

.likebox {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-left: 14px;
}

.liketit,
.esttit {
  width: 100%;
  font-size: 14px;
}

.num {
  width: 100%;
  color: #808080;
}

.likebtn {
  width: 80px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid #8080807c;
  transform: scale(0.9);
  & img {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
  }
}

//歌单分类
.sheet {
  width: 100%;
  padding-left: 20px;
  display: flex;
}

.add {
  width: 20px;
  font-size: 12px;
  margin-left: auto;
  padding-right: 10px;
}

.emptybox {
  margin: auto;
}

.bottom-button {
  width: 160px;
  height: 30px;
}

.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}

/deep/.van-tab--active {
  font-weight: 600;
}

/deep/.van-swipe-cell {
  width: 100%;
  top: 10px;
  margin-bottom: 10px;
}

/deep/.van-card__title {
  margin-top: 26px;
  font-size: 14px;
  padding-bottom: 6px;
}

/deep/.van-card__desc {
  color: #808080;
}

.helptit {
  width: 100%;
  text-align: center;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}

/deep/.van-notice-bar {
  width: 100%;
  background-color: #fff;
}

/deep/.van-notice-bar__content {
  left: 31%;
}

.helpbox {
  width: 100%;
}

.helpbtn {
  margin: auto;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  background-color: #fe3c30;
  color: #fff;
}

//播放列表
.songlist {
  &/deep/.van-popup--center {
    top: 64%;
    width: 90%;
    height: 64%;
    padding: 10px 20px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
  }
}

.playtit {
  width: 100%;
  height: 30px;
  font-size: 18px;
  font-weight: 600;
}

//歌曲列表
.tabbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
  &/deep/.van-icon {
    left: 20px;
    bottom: 6px;
  }
}

.sealing {
  width: 40px;
  height: 40px;
}

.sealing {
  &/deep/ .van-image__img {
    width: 40px;
    height: 40px;
  }
}

.tabname {
  width: 58%;
  display: flex;
  flex-wrap: wrap;
  padding-left: 6px;
}

.tabsongname {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  padding-left: 10px;
}

.tabtxt {
  display: flex;
  font-size: 12px;
  color: #9f9f9f;
  align-items: center;
}

.textbox {
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid red;
  color: red;
  transform: scale(0.5);
}

.tabplay {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #9f9f9f;
  margin-left: 20px;
}

.share {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #9f9f9f;
  margin-left: 10px;
}
</style>